<template>
  <view class="wallet-page">
    <!-- 余额信息 -->
    <view class="header">
      <view class="message-info">
        <image
          class="message-icon"
          src="/static/wallet/laba icon@2x.png"
          mode="widthFix"
        ></image>
        <view class="message-text">爪币抽奖换新活动，iPad开奖中</view>
        <view class="message-btn">
          立即参与
          <uni-icons type="right" size="20" color="707070" />
        </view>
      </view>
      <view class="balance-info">
        <view class="balance-item" @click="goBalance(0)">
          <view class="balance-label">爪币收益</view>
          <view class="balance-num"
            >{{ points }} <text>爪币</text
            ><uni-icons type="right" size="14" color="707070"
          /></view>
        </view>
        <view class="balance-item" @click="goBalance(1)">
          <view class="balance-label">余额</view>
          <view class="balance-num"
            >{{ balance }} <text>元</text
            ><uni-icons type="right" size="14" color="707070" />
          </view>
        </view>
      </view>
    </view>
    <!-- 每日签到 -->
    <view class="sign-in">
      <text class="sign-title">每日签到</text>
      <view class="sign-tips"
        >再签到<text class="sign-tips-num">{{ nextRewardDays }}天</text
        >可领取奖励</view
      >
      <view class="sign-progress">
        <view class="sign-day">
          <view class="sign-text">
            <image
              :src="
                Number(signInfo.signInTimes) >= 1
                  ? '/static/wallet/zhuabi1@2x.png'
                  : '/static/wallet/zhuabi icon@2x.png'
              "
            ></image>
            <text>第1天</text>
          </view>
        </view>
        <view class="sign-line"> </view>
        <view class="sign-day">
          <view class="sign-text">
            <image
              :src="
                Number(signInfo.signInTimes) >= 3
                  ? '/static/wallet/zhuabi1@2x.png'
                  : '/static/wallet/zhuabi icon@2x.png'
              "
            ></image>
            <text>第3天</text>
          </view>
        </view>
        <view class="sign-line"> </view>
        <view class="sign-day">
          <view class="sign-text">
            <image
              :src="
                Number(signInfo.signInTimes) >= 7
                  ? '/static/wallet/zhuabi1@2x.png'
                  : '/static/wallet/zhuabi icon@2x.png'
              "
            ></image>
            <text>第7天</text>
          </view>
        </view>
        <view class="sign-line"> </view>
        <view class="sign-day">
          <view class="sign-text">
            <image
              :src="
                Number(signInfo.signInTimes) >= 14
                  ? '/static/wallet/zhuabi1@2x.png'
                  : '/static/wallet/zhuabi icon@2x.png'
              "
            ></image>
            <text>第14天</text>
          </view>
        </view>
        <view class="sign-line"> </view>
        <view class="sign-day">
          <view class="sign-text">
            <image
              :src="
                Number(signInfo.signInTimes) >= 28
                  ? '/static/wallet/gift@2x.png'
                  : '/static/wallet/gift icon@2x.png'
              "
            ></image>
            <text>第28天</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 兑换按钮 -->
    <view class="exchange-bar">
      <view
        class="exchange-item"
        v-for="(item, index) in typeList"
        :class="{ actives: active == item }"
        :key="index"
        @click="active = item"
        >{{ item }}</view
      >
    </view>
    <!-- 好礼列表 -->
    <view v-if="active == '赚爪币'" class="task-list">
      <view class="task-item" v-for="(item, idx) in taskList" :key="idx">
        <view class="task-icon-block">
          <image class="task-icon" :src="item.icon" mode="aspectFill" />
        </view>
        <view class="task-content">
          <view class="task-title-row">
            <view class="task-title">
              <text class="task-titles">{{ item.title }}</text>
              <text class="task-reward">+{{ item.reward }}币</text>
            </view>
            <!--<button class="task-btn" :class="{'done': item.done}">{{item.done ? '已完成' : '去完成'}}</button>-->
          </view>
          <view class="task-desc">{{ item.desc }}</view>
        </view>
      </view>
    </view>
    <!-- 好礼列表 -->
    <view class="gift-list" v-if="active == '兑好礼'">
      <view class="gift-empty">暂无数据</view>
      <!--<view class="gift-item" v-for="i in 6" :key="i">-->
      <!--  <image-->
      <!--    class="gift-img"-->
      <!--    src="/static/wallet/gift@2x.png"-->
      <!--    mode="aspectFill"-->
      <!--  />-->
      <!--  <view class="gift-info">-->
      <!--    <view class="gift-row">-->
      <!--      <image src="/static/wallet/zhuabi1@2x.png"></image>-->
      <!--      <text class="gift-coin">500</text>-->
      <!--      <text class="gift-price">价值￥29.9</text>-->
      <!--    </view>-->
      <!--    <view class="gift-desc">猫爪品牌全营养好猫粮小袋装50g*2袋</view>-->
      <!--    <view class="gift-btn-block">-->
      <!--      <view class="gift-progress">-->
      <!--        <text class="gift-progress-text">再看4次广告必得</text>-->
      <!--        <progress-->
      <!--          :percent="20"-->
      <!--          stroke-width="3"-->
      <!--          activeColor="#D9F700"-->
      <!--          backgroundColor="#30303033"-->
      <!--          border-radius="26"-->
      <!--      /></view>-->
      <!--      <view class="gift-btn">赚爪币</view>-->
      <!--    </view>-->
      <!--  </view>-->
      <!--</view>-->
    </view>
    <view class="attendance-btn" @click="handleSign">立即签到</view>
  </view>
</template>

<script>
import commonMixin from "/mixin/commonMinxin";
export default {
  mixins: [commonMixin],
  data() {
    return {
      typeList: ["赚爪币", "兑好礼"],
      active: "赚爪币",
      taskList: [
        {
          icon: "/static/wallet/xinyonghu@2x.png",
          title: "新用户赠送积分",
          reward: 10,
          desc: "注册赠送一定数量积分",
          done: false,
        },
        {
          icon: "/static/wallet/laxinjiangli@2x.png",
          title: "拉新奖励",
          reward: 50,
          desc: "用户通过邀请链接/邀请码注册的新⼈",
          done: false,
        },
        {
          icon: "/static/wallet/qiandao@2x.png",
          title: "每日签到",
          reward: 5,
          desc: "每日登录/签到获得累计数量积分",
          done: true,
        },
        {
          icon: "/static/wallet/fenxiang@2x.png",
          title: "动态分享",
          reward: 10,
          desc: "用户/宠物 首次发帖赠送一定数量积分",
          done: false,
        },
        {
          icon: "/static/wallet/hudong@2x.png",
          title: "互动奖励",
          reward: 5,
          desc: "评论/点赞 首次获得一定数量积分",
          done: false,
        },
        {
          icon: "/static/wallet/wanshanxinxi@2x.png",
          title: "完善信息",
          reward: 30,
          desc: "填写个人信息及宠物档案获得积分",
          done: false,
        },
      ],
      points: 0,
      balance: 0,
      signInfo: {},
      signOptions: [
        {
          value: "1",
        },
        {
          value: "3",
        },
        {
          value: "7",
        },
        {
          value: "14",
        },
        {
          value: "28",
        },
      ],
    };
  },
  computed: {
    nextRewardDays() {
      // signOptions 可能是字符串数组，先转成数字并排序
      const daysArr = this.signOptions
        .map((opt) => Number(opt.value))
        .sort((a, b) => a - b);
      const current = Number(this.signInfo.signInTimes) || 0;
      // 找到第一个大于当前签到天数的奖励天数
      const next = daysArr.find((day) => day > current);
      if (next) {
        return next - current;
      } else {
        return null; // 已经全部领取
      }
    },
  },
  onLoad(options) {
    this.getPoints();
    this.getBalance();
    this.getSignInfo();
  },
  methods: {
    // 获取积分
    getPoints() {
      uni.app.post(
        "/api/cyBerIntegral/anb",
        {
          uid: localStorage.getItem("userId"),
        },
        "json",
        "",
        (res) => {
          this.points = res.data;
        },
      );
    },
    // 获取余额
    getBalance() {
      uni.app.post(
        "/api/cyBerBalance/anb",
        {
          uid: localStorage.getItem("userId"),
        },
        "json",
        "",
        (res) => {
          this.balance = res.data;
        },
      );
    },
    // 获取每日签到信息
    getSignInfo() {
      uni.app.post(
        "/api/daily/signInInfo",
        {
          userId: localStorage.getItem("userId"),
        },
        "json",
        "",
        (res) => {
          this.signInfo = res.data;
        },
      );
    },
    // 跳转积分余额
    goBalance(type) {
      uni.navigateTo({
        url: `/pages/wallet/details?type=${type}`,
      });
    },
    // 签到
    handleSign() {
      uni.app.post(
        "/api/daily/signIn",
        { userId: localStorage.getItem("userId") },
        "json",
        "",
        (res) => {
          this.getSignInfo();
          this.getPoints();
        },
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.wallet-page {
  background-image: url("/static/wallet/poster.png");
  background-size: 100% 500rpx;
  background-repeat: no-repeat;
  background-position: 0 -60rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 20rpx;
  padding-top: 322rpx;
  .attendance-btn {
    position: fixed;
    border-radius: 50rpx;
    box-shadow: 0 6rpx 20rpx 0 rgba(217, 247, 0, 0.3);
    width: 700rpx;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 32rpx;
    font-weight: 600;
    bottom: 40rpx;
    left: 50%;
    transform: translateX(-50%);
    color: #303030;
    background: linear-gradient(90deg, #eaff2b 0%, #d9f700 100%);
    text-align: center;
    letter-spacing: 2rpx;
    transition: all 0.3s;

    &:active {
      transform: translateX(-50%) scale(0.98);
      opacity: 0.9;
    }
  }
}

.header {
  width: 95vw;
  margin: 0 auto;
  background-color: #ffffffcb;
  border-radius: 16rpx;
  overflow: hidden;

  .message-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50rpx;
    padding-left: 16rpx;

    .message-icon {
      width: 50rpx;
    }

    .message-text {
      font-weight: 400;
      font-size: 24rpx;
      color: #303030;
      flex: 1;
      padding-left: 16rpx;
    }

    .message-btn {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #707070;
    }
  }

  .balance-info {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: 34rpx;

    .balance-item {
      padding-right: 20rpx;

      .balance-num {
        font-weight: 600;
        font-size: 68rpx;
        color: #303030;

        text {
          font-size: 24rpx;
          color: #303030;
          font-weight: 400;
        }
      }

      .balance-label {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.sign-in {
  width: 95vw;
  background: #fff;
  margin: 32rpx auto;
  border-radius: 20rpx;
  padding: 20rpx;

  .sign-title {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
  }
  .sign-tips {
    font-size: 24rpx;
    color: #707070;
    margin-top: 15rpx;
  }
  .sign-tips-num {
    color: #ff6a00;
  }

  .sign-progress {
    margin-top: 32rpx;
    display: flex;
    justify-content: space-between;

    .sign-day {
      margin-right: 4rpx;
      position: relative;
      display: flex;
      justify-content: space-between;
      .sign-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 60rpx;

        image {
          display: block;
          width: 60rpx;
          height: 60rpx;
        }

        text {
          margin-top: 16rpx;
          text-align: center;
          font-size: 20rpx;
          color: #999;
        }
      }
    }

    .sign-line {
      width: 72rpx;
      height: 8rpx;
      background: #7f7f7f;
      opacity: 40%;
      border-radius: 4rpx;
      margin-top: 26rpx;
    }
  }
}

.exchange-bar {
  width: 95vw;
  display: flex;
  align-items: center;
  margin: 64rpx auto;

  .exchange-item {
    width: 35%;
    height: 48rpx;
    border-radius: 30rpx;
    background: #fff;
    margin-right: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 28rpx;
    color: #303030;
  }

  .actives {
    width: 65%;
    background: #eaff2b;
    font-weight: bold;
    font-size: 28rpx;
    color: #303030;
  }
}

.gift-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 30rpx 20rpx 0 20rpx;

  .gift-empty {
    width: 100%;
    text-align: center;
    font-size: 24rpx;
    color: #999;
  }

  .gift-item {
    width: 48%;
    background: #fff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .gift-img {
      width: 100%;
      height: 200rpx;
      object-fit: cover;
      border-radius: 20rpx;
      margin-bottom: 10rpx;
      background: #f5f5f5;
    }

    .gift-info {
      width: 100%;

      .gift-row {
        display: flex;
        align-items: center;
        gap: 12rpx;
        margin-bottom: 6rpx;

        image {
          width: 32rpx;
          height: 32rpx;
        }

        .gift-coin {
          color: #303030;
          font-size: 36rpx;
          font-weight: bold;
        }

        .gift-price {
          color: #303030;
          font-size: 20rpx;
        }
      }

      .gift-desc {
        color: #303030;
        font-size: 26rpx;
        margin-bottom: 10rpx;
        line-height: 34rpx;
      }

      .gift-btn-block {
        position: relative;
        width: 100%;
        height: 52rpx;
        background-color: #f8f8f8;
        border-radius: 26rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6rpx;
        padding-left: 16rpx;
        .gift-progress {
          flex: 1;
          font-size: 16rpx;
          color: #303030;
          .gift-progress-text {
            margin-bottom: 4rpx;
          }
        }
        .gift-btn {
          background-color: #d9f700;
          border-radius: 40rpx;
          height: 52rpx;
          width: 110rpx;
          font-size: 26rpx;
          line-height: 52rpx;
          text-align: center;
          color: #303030;
        }
      }
    }
  }
}

.task-list {
  width: 95vw;
  margin: 0 auto;
  padding-bottom: 140rpx;

  .task-item {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    border: 2rpx dashed #eaeaea;
    padding: 24rpx 16rpx 24rpx 32rpx;

    .task-icon-block {
      width: 116rpx;
      height: 116rpx;
      background: #eaff2b;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 24rpx;

      .task-icon {
        width: 100%;
        height: 100%;
      }
    }

    .task-content {
      height: 116rpx;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .task-title-row {
        display: flex;
        align-items: center;

        .task-title {
          flex: 1;
        }

        .task-titles {
          font-size: 32rpx;
          color: #303030;
          line-height: 46rpx;
        }

        .task-reward {
          color: #ff7e00;
          font-size: 26rpx;
          margin-left: 12rpx;
        }

        .task-unit {
          color: #ff7e00;
          font-size: 22rpx;
          margin-left: 2rpx;
        }

        .task-btn {
          margin-left: auto;
          background: #eaff2b;
          color: #303030;
          font-size: 24rpx;
          border-radius: 10rpx;
          padding: 0 24rpx;
          height: 48rpx;
          display: flex;
          align-items: center;
          border: none;
        }

        .task-btn.done {
          background: #ededed;
          color: #bdbdbd;
        }
      }

      .task-desc {
        font-weight: 400;
        font-size: 28rpx;
        color: #999999;
        line-height: 44rpx;
      }
    }
  }
}
</style>
